<template>
    <div>
        <nav-bar class="nav-bar">
            <div slot="left" class="back" @click="backClick">
                <img src="~assets/img/common/back.svg" alt="" />
            </div>
            <div slot="center">
                <p>悄悄告诉你下单就别想退款呦</p>
            </div>
        </nav-bar>
        <tab-control :titles="orderCategory" class="" @tabClick="tabClick"></tab-control>
        <order-detail :tableData="orderInfos" @refundClick="_refundClick" @qrCodeClick="_orderQRCode"></order-detail>
        
        <el-dialog :title="paySucc?'没买票看个锤子':'请扫码进景区'" :visible.sync="dialogVisible" width="70%" class="visible" ref="qrCodeImage">
            <img :src="qrImg" alt="你的二维码叛逃了"/>
        </el-dialog>
    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import OrderDetail from './orderComps/OrderDetail'

import {selectOrder, refund, orderQRCode} from 'network/shopcar.js'
export default {
    name: "OrderInfo",
    data() {
        return {
            orderCategory: ['全部','待付款','待评价','已退款'],
            orderInfos: [],
            currIndex: 0,
            qrImg: "",
            dialogVisible: false,
            paySucc: false,
        }
    },
    components: {
        NavBar,
        TabControl,
        OrderDetail,
    },
    created() {
        this._selectOrder('全部');
    },
    methods: {
        tabClick(index) {
            this.currIndex = index;
            console.info(this.orderCategory[this.currIndex]);
            this._selectOrder(this.orderCategory[this.currIndex]);
        },
        _orderQRCode(row) {
            console.info(row)
            const content = this.$store.state.user[0].username+row.name+row.totalMoney;
            console.info(content);
            orderQRCode(content).then((res) => {
                console.info(res);
                this.qrImg = 'data:image/png;base64,'+res.data;
                this.dialogVisible = true;
            })
        },
        _refundClick(row) {
            refund(row.orderId,row.orderLineId).then(res => {
                console.info(res);
                if(res.code === 1) {
                    this.$toast.show("退款成功");
                    row.status = '已退款';
                    if(res.data !== null) {
                        row.orderId = res.data;
                    }
                }else {
                    this.$toast.show("退款失败");
                }
            })
        },
        _selectOrder(type) {
            selectOrder(this.$store.state.user[0].username,type).then((res) => {
                console.info(res);
                this.orderInfos=res.data;
            })
        },
        backClick() {
            this.$router.push("/profile");
        },
    },

}
</script>
<style scoped>
.nav-bar {
  position: relative;
  z-index: 9;
  background-color: rgb(153, 255, 0);
  color: #fff;
}
.visible{
    text-align: center;
}
</style>